<template>
	<div :class="{'home-content' : navStatus, 'home-content-nav-status' : !navStatus}">
		<home-header @navBtn="btnChange" :bannerUrl="bannerUrl"></home-header>
		<div class="zz">
			<div class="zz-list1" v-for="item in qualifications" :key="item.id">
				<div class="img"></div>
				<span>{{item.name}}</span>
			</div>
		</div>
		<home-advantage></home-advantage>
		<home-news></home-news>
		<home-teacher></home-teacher>
		<home-footer></home-footer>
		<home-nav></home-nav>
	</div>
</template>

<script>
import HomeHeader from "@/Home/HomeHeader";
import HomeAdvantage from "@/Home/HomeAdvantage";
import HomeNews from "@/Home/HomeNews";
import HomeTeacher from "@/Home/HomeTeacher";
import HomeFooter from "@/Home/HomeFooter";
import HomeNav from "@/Home/HomeNav";
export default {
  name: "Home",
  data() {
    return {
      navStatus: true,
      bannerUrl: require("../assets/img/banner.jpg"),
      qualifications: [
        {
          id: 1,
          name: "工商注册"
        },
        {
          id: 2,
          name: "资质出售"
        },
        {
          id: 3,
          name: "资质新办"
        },
        {
          id: 4,
          name: "资质升级"
        },
        {
          id: 5,
          name: "代理记账"
        }
      ]
    };
  },
  methods: {
    btnChange: function(re) {
      this.navStatus = re;
    }
  },
  components: {
    HomeHeader,
    HomeAdvantage,
    HomeNews,
    HomeTeacher,
    HomeFooter,
    HomeNav
  }
};
</script>

<style lang="stylus" scoped>
.home-content
	position relative
	transform translateX(0rem)
	transition all .5s linear
	width 100%
	overflow hidden
.home-content-nav-status
	position relative
	transform translateX(-4.65rem)
	transition all .5s linear
.zz
	width 96%
	display flex
	justify-content space-between
	padding 0 2%
	margin-bottom .18rem
	.zz-list1
		width 1.13rem
		span
			font-size.16rem
			display block
			margin-top .22rem
		.img
			background url('../assets/img/icon-zz.png')
			width 1.13rem
			height 1.13rem
			background-size 5.65rem 1.13rem
			margin-top .24rem
		.img:nth-of-type(1)
			background-position 0 0
	.zz-list1:nth-of-type(2)
		.img
			background-position -1.13rem 0
	.zz-list1:nth-of-type(3)
		.img
			background-position -2.26rem 0
	.zz-list1:nth-of-type(4)
		.img
			background-position -3.39rem 0
	.zz-list1:nth-of-type(5)
		.img
			background-position -4.52rem 0
</style>
